import React from 'react';
import { Outlet } from 'react-router-dom';
import { Layout } from 'antd';
import Header from '../../components/Header';
import LeftNav from '../../components/LeftNav';

type StypeConfig = {
    layout: {
        minHeight: string;
    };
    content: {
        margin: number;
        backgroundColor: string;
    };
    footer: {
        display: 'flex';
        justifyContent: string;
        alignItems: string;
        color: string;
    };
};

const { Footer, Sider, Content } = Layout;
const styleConfig: StypeConfig = {
    layout: {
        minHeight: '100%'
    },
    content: {
        margin: 20,
        backgroundColor: '#fff'
    },
    footer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        color: 'silver'
    }
};

// 管理后台路由组件
const Admin: React.FC = () => {
    return (
        <Layout style={styleConfig.layout}>
            <Sider>
                <LeftNav />
            </Sider>
            <Layout>
                <Header />
                <Content style={styleConfig.content}>
                    <Outlet />
                </Content>
                <Footer style={styleConfig.footer}>推荐使用谷歌浏览器，可以获得更佳页面，操作体验</Footer>
            </Layout>
        </Layout>
    );
};

export default Admin;